<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>game</title>
</head>
<body>
    <!-- 通过表单来实现游戏的UI -->
    <form action="3_game.html">
        <h3>石头、剪刀、布小游戏</h3>
        <p>选择一个手势，猜猜你和电脑谁会赢？</p>
        <select name="game" id="game">
            <option value="0" name="game">剪刀</option>
            <option value="1" name="game">石头</option>
            <option value="2" name="game">布</option>
        </select>
            <input type="submit" value="开始" id="start">
    </form>

    <!-- js部分 -->
    <script>
        var str =['剪刀','石头','布'];
        // 定义一个变量来与html中的表单获取联系
        var st = document.getElementById("start");
        // 给表单的开始按钮添加事件
        st.onclick = function() {
            var dt = document.getElementById("game");
            // 定义一个元素来获取form中提交的值
            var flag = dt.value;
            //给电脑定义一个变量，用于存放电脑的结果（0~2的整数）
            // 利用Math.random产生0~1的随机数*2就可以得到0~2之间的随机数
            // 再利用Math.round()来给得到的随机数取整，以便于判断胜负
            var com_flag = Math.round(Math.random()*2) ;

            if ((str[flag] == str[com_flag + 1]) || (str[flag] == str[com_flag - 2])) {
                alert("你出的是：" + str[flag] + " 电脑出的是：" + str[com_flag] + ' \n' + "你赢了");
            } else if (flag == com_flag) {
                alert("你出的是：" + str[flag] + " 电脑出的是：" + str[com_flag] + ' \n' + "平局");
            }else{
                alert("你出的是：" + str[flag] + " 电脑出的是：" + str[com_flag] + ' \n' + "你输了");
            }
        }
       
    </script>
</body>
</html>
